<template>
  <div class="bandWidthContext">
    <div class="bandwidthFatherBox">
      <el-button type="success" size='small' @click="openDialogVisible()" class="addClickOpen">{{$t('添加接口')}}</el-button>
      <el-button type="success" size='small' @click="classDialogVisible()" class="addClickClass">{{$t('添加出方向带宽通道')}}</el-button>
      <el-button type="success" size='small' @click="dialogVisible()" class="addClickRule">{{$t('添加带宽规则')}}</el-button>
    </div>
    <el-table size='mini' ref="multipleTable" :row-key="rowkey" :expand-row-keys='expandArray' :tree-props="{children: 'child'}" default-expand-all :data="bandwidthList" tooltip-effect="dark" style="margin-top:10px;width: 100%;position: relative;">
      <el-table-column prop="label" :label="$t('名称')" header-align='center' :min-width="lang === 'zh'?'200':'260'">
        <template slot-scope="scope">
          <span :class="nameClassChange(scope.row)">
            <tooltip :copyText="$t(scope.row.label) + ':' + scope.row.name" class="BandWidthSpanText">
            </tooltip>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="priority" :label="$t('优先级')" align='center' min-width="120">
        <template slot-scope="scope">
          <tooltip v-if="scope.row.label !== '接口'" :copyText="scope.row.priority" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="gurantee" align='center' :label="$t('出方向保证带宽')" min-width="120">
        <template slot-scope="scope">
          <tooltip v-if="scope.row.label !== '接口'" :copyText="scope.row.gurantee?(scope.row.gurantee + scope.row.gurantee_unit):''" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="limit" align='center' :label="$t('出方向限制带宽')" min-width="120">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.limit + scope.row.limit_unit" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="limit_ingress" align='center' :label="$t('入方向限制带宽')" min-width="120">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.limit_ingress + scope.row.limit_unit_ingress" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ip_type" align='center' :label="$t('IP类型')" min-width="120">
        <template slot-scope="scope">
          <tooltip :copyText="ipType[scope.row.ip_type] || scope.row.ip_type" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src" align='center' :label="$t('源IP')" min-width="120">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst" align='center' :label="$t('目的IP')" min-width="120">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="service" align='center' :label="$t('服务')" min-width="120">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.service" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="app" align='center' :label="$t('应用')" min-width="120">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.app" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="time" align='center' :label="$t('时间')" min-width="120">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.time" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="user" align='center' :label="$t('用户')" min-width="120">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.user" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="right" align='center' fixed="right" :label="$t('操作')" :width="lang === 'zh'?'150':'160'">
        <template slot-scope="scope">
          <el-button type="success" v-if="scope.row.label === '接口'" plain size="mini" @click="openDialogVisible(scope.row)" :class="'edit' +(scope.$index+1)">{{$t('编辑')}}</el-button>
          <el-button type="success" v-if="scope.row.label === '带宽规则'" plain size="mini" @click="dialogVisible(scope.row)" :class="'edit' +(scope.$index+1)">{{$t('编辑')}}</el-button>
          <el-button type="success" v-if="scope.row.label === '出方向带宽通道'" plain size="mini" @click="classDialogVisible(scope.row)" :class="'edit' +(scope.$index+1)">{{$t('编辑')}}</el-button>
          <el-button type="danger" plain size="mini" @click="deleteData(scope.row)" :class="'del' +(scope.$index+1)">{{$t('删除')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="record.page" :page-size="record.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination> -->

    <bandwidth-dialog v-if="bandwidthDialogVisible" ref="refBandwidthDialogVisible"></bandwidth-dialog>
    <eth-dialog v-if="ethDialogVisible" ref="refEthDialogVisible"></eth-dialog>
    <classify-dialog v-if="classifyDialogVisible" ref="refClassifyDialogVisible"></classify-dialog>
  </div>
</template>
<script>
import { getBandWidthArray, delBandWidth, delInterface, delRule } from '@/api/network/bandwidth'
import BandwidthDialog from './components/BandwidthDialog'
import EthDialog from './components/EthDialog.vue'
import ClassifyDialog from './components/ClassifyDialog.vue'
// import 'view-design/dist/styles/iview.css'
export default {
  name: 'Bandwidth',
  components: {
    BandwidthDialog,
    EthDialog,
    ClassifyDialog
  },
  data () {
    return {
      bandwidthDialogVisible: false,
      ethDialogVisible: false,
      classifyDialogVisible: false,
      lang: this.$i18n.locale,
      bandwidthList: [],
      expandArray: [],
      ipType: {
        'ipv4': 'IPv4',
        'ipv6': 'IPv6'
      }
      // record: {
      // page: 1,
      // limit: 10
      // },
      // total: 0
    }
  },
  created () {
    this.listData()
  },
  watch: {
    expandArray (data) {
      // console.log(data)
    }
  },
  methods: {
    rowkey (data) {
      return data.id + data.label
    },
    // handleSizeChange (val) {
    //   // console.log(`每页 ${val} 条`)
    //   this.record.limit = val
    //   this.listData()
    // },
    // handleCurrentChange (val) {
    //   // console.log(`当前页: ${val}`)
    //   this.record.page = val
    //   this.listData()
    // },
    // 列表
    listData () {
      getBandWidthArray().then(res => {
        if (res.status === 0) {
          this.bandwidthList = res.info
          this.recursionArray(this.bandwidthList)
        }
      })
    },
    recursionArray (list) {
      list.forEach(item => {
        if (item.parent_type === 'class') {
          item.label = '出方向带宽通道'
        } else if (item.parent_type === 'interface') {
          item.label = '接口'
        } else {
          item.label = '带宽规则'
        }
        if (item.child && item.child.length > 0) {
          this.recursionArray(item.child)
        }
      })
    },
    // 添加规则
    dialogVisible (data) {
      this.bandwidthDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refBandwidthDialogVisible.init(data)
      })
    },
    // 添加接口
    openDialogVisible (data) {
      this.ethDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refEthDialogVisible.init(data)
      })
    },
    // 添加带宽分类
    classDialogVisible (data) {
      this.classifyDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refClassifyDialogVisible.init(data)
      })
    },
    deleteData (data) {
      this.$confirm(this.$t('确认是否删除？'), this.$t('提示'), {
        closeOnClickModal: false,
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        confirmButtonClass: 'confirmButton',
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        if (data.label === '接口') {
          delInterface({ name: data.name }).then(res => {
            if (res.status === 0) {
              this.$message({
                message: this.$t('删除成功'),
                type: 'success'
              })
              this.listData()
            }
          })
        } else if (data.label === '出方向带宽通道') {
          delBandWidth({ name: data.name }).then(res => {
            if (res.status === 0) {
              this.$message({
                message: this.$t('删除成功'),
                type: 'success'
              })
              this.listData()
            }
          })
        } else if (data.label === '带宽规则') {
          delRule({ name: data.name }).then(res => {
            if (res.status === 0) {
              this.$message({
                message: this.$t('删除成功'),
                type: 'success'
              })
              this.listData()
            }
          })
        }
      })
    },
    nameClassChange (row) {
      if (row.parent_type === 'interface' && !row.child) {
        return 'nameInterval'
      }
    }
  }
}
</script>
<style lang="less">
.BandWidthSpanText {
  line-height: 31px;
  display: inline;
  // position: relative;
  .el-tooltip {
    position: absolute;
    display: inline-block;
    max-width: 200px;
    line-height: 31px;
  }
}
.nameInterval {
  margin-left: 26px;
}
</style>
